<template>
  <div class="className">
    <div class="classBut">
      <el-button type="primary" @click="addRolesTab">添加轮播</el-button>
    </div>
    <div class="classpage">
      <el-table :data="tableData" border stripe>
        <el-table-column prop="id" label="序号" width="60"></el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.img" alt="" class="intropic"></template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="200"></el-table-column>
        <el-table-column prop="time" label="创建时间" width="150"></el-table-column>
        <el-table-column prop="newtime" label="修改时间" width="150"></el-table-column>
        <el-table-column prop="name" label="创建人" width="200"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="editTable(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              @click="Delete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :title="dia_title"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="50%">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" style="width:400px">
        <el-form-item label="轮播标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="轮播图片" prop="img">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item size="large" class="btn">
          <el-button type="primary" @click="onSubmit('ruleForm')">立即创建</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData:[
        {
          id:1,
          img:"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1587461855&di=ad6c31f4c7853befc5c378c09a4b43f6&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg",
          time:'2020-04-21',
          title:'标题1',
          newtime:'2020-04-21',
          name:'admin'
        }
      ],
      dia_title:"创建轮播图",     //弹出框文字提示
      dialogVisible:false,        //弹出框
      ruleForm:{},               //弹窗内容
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        img: [
          { required: true, message: '请上传轮播图片', trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    // 创建
    addRolesTab(){
      this.dia_title = '创建轮播图'
      this.dialogVisible = true
    },
    // 确认发布
    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.dia_title = '创建轮播图'){
            console.log('创建轮播图')
          }else{
            console.log('编辑轮播图')
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 弹出框关闭确认
    handleClose() {
      this.ruleForm = {}
      this.dialogVisible = false
    },
    // 编辑
    editTable(e){
      this.ruleForm.title = e.title
      this.ruleForm.img = e.img
      this.dia_title = '编辑轮播图'
      this.dialogVisible = true
    },
    // 删除
    Delete(e){
      this.$confirm('确认删除这个轮播图吗？')
        .then(_ => {
          console.log(e.id)
        })
        .catch(_ => {});
    },
    // 图片上传成功后
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 图片上传中
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    }
  
  }
}
</script>
<style lang="scss"  scoped>
.classBut{margin:20px;}
.classpage{
  margin:20px;
  .intropic{
    width:200px;
    height: 150px;
  }
}
</style>